<template>
	<scroll-view>
		<!-- 首页 -->
		<!-- 轮播图开始 -->
		<swiper class="swiper"  :indicator-dots="true" :autoplay="true" :interval="5000" :duration="1000" :circular="true" indicator-active-color="#ccc">
			<swiper-item v-for="(item,i) in swiperList" :key="i" class="swiper-item">
			      <view class="item">
			        <image class="image"  :src="swiperImageUrl+item.url" mode="heightFix"></image>
			      </view>
			</swiper-item>
		</swiper>
		<!-- 轮播图结束 -->
		<!-- 导航开始 -->
		<view class="nav-list">
			<view class="nav-line">
				<navigator class="nav-item" hover-class="none" v-for="(item,i) in MenuLists.slice(0,4)" :key="i" :url='item.href' :open-type="item.opentype"  >
					<image :src="navImageUrl+item.icon" class="nav-img"></image>
					<view>{{item.title}}</view>
				</navigator>
			</view>
			<view class="nav-line">
				<navigator class="nav-item" hover-class="none" v-for="(item,i) in MenuLists.slice(4)" :key="i" :url='item.href' :open-type="item.opentype"  >
					<image :src="navImageUrl+item.icon" class="nav-img"></image>
					<view>{{item.title}}</view>
				</navigator>
			</view>
		</view>
		<!-- 导航结束 -->
		<!-- 推荐开始 -->
		  <view class="recommend wm">
		    <view class="recommend-item">
		      <image class="jx" src="../../static/jx.png" mode=""/>
		      <view class="text">
		       <view>志愿填报</view>
		       <view>一对一志愿填报服务，解锁梦想大门</view>
		      </view>
		    </view>
		    <view class="recommend-item">
		      <image class="kz" src="../../static/kz.png" mode=""/>
		      <view class="text">
		       <view>单招真题</view>
		       <view>刷真题高效备考单招，只为一场更精彩的未来</view>
		      </view>
		    </view> 
		  </view>
		  <!-- 推荐结束 -->
		  <!-- 最新动态开始 -->
		    <view class="news-box wm">
		      <view class="bigtitle" @click="moreNews">
				<view class="line"></view>
		        <view class="text">最新动态</view>
				<view class="more">更多</view>
		      </view>
		      <!--  -->
			  <block v-if="TopNews.length > 0">
		       <news-item :news="TopNews"></news-item>
			  </block>
		    </view>
			
	</scroll-view>
</template>

<script>
	export default {
		data() {
			return {
				swiperList: [],  //轮播图列表
				MenuLists: [],  //导航列表
				TopNews:[]
			};
		},
		onHide() {
	
		},
		onLoad() {
			//在小程序刚加载的时候，调用获取轮播图数据的方法
			this.getSwiperList();
			this.getHomeMenu();
			this.getTopNews();
		},
		
		computed:{
			swiperImageUrl:function(){
				return getApp().globalData.portUrl + "/public/static/admin/uploads/slide/";
			},
			newsImageUrl:function(){
				return getApp().globalData.portUrl + "/public/static/admin/uploads/news/";
			},
			navImageUrl:function(){
				return getApp().globalData.portUrl + "/public/static/admin/uploads/navigatorimage/";
			}
		},
		methods: {
			
			/**
			 * 定义一个获取轮播图数据的方法
			 */
			async getSwiperList(){
				//发起请求
				const {data:res} = await uni.$http.post("Swiper/getAllSlider");
				//请求失败
				if(res.meta.status !== 1) return uni.$showMsg();
				//请求成功
				this.swiperList = res.data;
			},
			/**
			 * 获取导航信息
			 */
			async getHomeMenu(){
				//发起请求
				const {data:res} = await uni.$http.post("Homemenus/getHomemenus");
				//请求失败
				if(res.meta.status !== 1) return uni.$showMsg();
				//请求成功
				this.MenuLists = res.data;
			},
			/**
			 * 获取10条新闻
			 */
			async getTopNews(){
				//发起请求
				const {data:res} = await uni.$http.post("newss/getTopNews");
				//请求失败
				if(res.meta.status !== 1) return uni.$showMsg();
				//请求成功
				this.TopNews = res.data;
			},
			/**
			 * 跳转到新闻列表页面
			 */
			moreNews(){
				uni.navigateTo({
					url:"/subpkg/news_list/news_list"
				})
			}
		}
	}
</script>

<style lang="scss">
/*轮播图开始*/
.swiper{
	width: 100%;
	height: 400rpx;
	overflow: hidden;
	border-radius: 0 0 50rpx 50rpx;
    .swiper-item{
		display: flex;
		justify-content: center; /*水平居中*/
		align-items: center; /*垂直居中*/
		width: 100%;
		height: 100%;
	}
	.swiper .image{
		height: 400rpx;
		width: 100%;
	}
}
/*轮播图结束*/
/*导航开始*/
.nav-list{
	position:relative;
	z-index: 10;
	margin-top:-50rpx;
	background-color:#fff;
	border-radius: 10rpx;
	width: 95%;
	margin-left:auto;
	margin-right:auto;
	padding:20rpx 0;
    .nav-line{
		display: flex;
		justify-content: space-between;
		height: 130rpx;
    }
	.nav-item{
	  display: block;
	  width: 25%;
	  height: 130rpx;
	  text-align: center;
	  font-size:25rpx;
	}
	.nav-img{
		width: 80rpx;
		height: 80rpx;
	}
}
/*导航结束*/
/*新闻模块*/
.news-box{
	
}
/*新闻模块*/
/* 推荐开始 */
.recommend{
  height: 200rpx;
  display: flex;
  justify-content: space-between;
  margin:30rpx auto;
}
.recommend .recommend-item{
  width: 48%;
  height: 100%;
  background:green;
  border-radius: 10rpx;
  position: relative;
}
.recommend .recommend-item:nth-of-type(2){
  background-image:linear-gradient(to right,#feb27a,#ff7d5d);
}
.recommend .recommend-item:nth-of-type(1){
  background-image:linear-gradient(to right,#93bdf3,#68d0e3);
}

.recommend .recommend-item .jx{
  height: 210rpx;
  width: 160rpx;
  position: absolute;
  left:-20rpx;
  bottom: 0;
}
.recommend .recommend-item .kz{
  height: 190rpx;
  width: 160rpx;
  position: absolute;
  right:-13rpx;
  bottom: 0;
}
.recommend .recommend-item:nth-of-type(1) .text{
  position: absolute;
  width: 50%;
  right: 30rpx;
  top:20rpx;
  color:rgb(255, 255, 255);
}
.recommend .recommend-item:nth-of-type(1) .text view:nth-of-type(1),.recommend .recommend-item:nth-of-type(2) .text view:nth-of-type(1){
  font-size:30rpx;
  font-weight: bold;
  text-align: center;
  line-height: 50rpx;
}
.recommend .recommend-item:nth-of-type(1) .text view:nth-of-type(2),.recommend .recommend-item:nth-of-type(2) .text view:nth-of-type(2){
  font-size:25rpx;
  text-align: justify;
}

.recommend .recommend-item:nth-of-type(2) .text{
  position: absolute;
  width: 55%;
  left: 30rpx;
  top:20rpx;
  color:rgb(255, 255, 255);
}
/* 推荐结束 */


/* 标题组件开始 */
.bigtitle{
	background-color:#fff;
	height: 100rpx;
	line-height: 100rpx;
	padding-left:35rpx;
	border-radius: 10rpx;
	.line{
	  height: 36rpx;
	  width: 8rpx;
	  float: left;
	  margin-top: 33rpx;
	  margin-right:10rpx ;
	  background-color:#d11a2d;
	  border-radius: 4rpx;
	}
	.text{
	  float: left;
	  text-align: left;
	  font-size: 35rpx;
	  font-weight: bold;
	  display: block;
	}
	.more{
		color: #515151;
		margin-right: 35rpx;
		float: right;
		font-size:24rpx;
		background-image: url(../../static/more.png);
		background-size:25rpx;
		background-position: right;
		background-repeat: no-repeat;
		padding-right: 25rpx;
	}
}
</style>
